<template>
    <div class="root" :class="expanded ? 'expanded': ''">
        <div class="trigger" @click="handleToggleExpand">
            <Icon size="24" style="position:absolute;top:50%;transform:translateY(-50%)" type="ios-pause-outline" />
        </div>
        <div class="currentDir">
            <div class="fullPath">{{ currentDir }}</div>
            <Button
                icon="md-arrow-round-back"
                :disabled="currentDir === rootDir"
                @click="handleBack"
                >上一级
            </Button>
            <Button
                class="clipboard-btn"
                :data-clipboard-text="currentDir"
                icon="ios-copy-outline"
                type="primary"
                >复制路径</Button
            >
        </div>
        <div class="files">
            <div class="file" v-for="dir in dirs" :key="dir.name" @click="handleClickDir(dir)">
                <Icon style="color:#daa520;" type="ios-folder-outline" size="14" />
                <div class="fileName">{{ dir.name }}</div>
                <Icon style="color:#daa520;" type="ios-arrow-dropdown" size="14" />
            </div>
            <div class="file" v-for="(file, index) in files" :key="file.name">
                <Icon style="color:#daa520;" type="md-document" size="14" />
                <div class="fileName" :id="`clipboard-file-${index}`" :data-clipboard-text="currentDir + file.name">
                {{ file.name }}
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import Clipboard from "clipboard";
import { mapActions } from 'vuex';
export default {
    clipboard: null,
    data() {
        return {
            taskId:Number(this.$route.query.task_id),
            rootDir: "/",
            currentDir:'/',
            expanded:true,
            dirs: [{ name: "test", size: 0, dir: true }],
            files: [{ name: "test2.txt", size: 12, dir: false }]
        }
    },
    methods: {
        ...mapActions(['XgetDirlist']),
        handleToggleExpand() {
            this.expanded = !this.expanded;
        },
        viewDir(path = ""){
            this.XgetDirlist({
                from_type:0,
                path,
                task_id:this.taskId
            }).then(({data}) => {
                if (!data || data.msg !== "OK") {
                    return Promise.reject();
                }

                const finalDir = data.dir.endsWith("/") ? data.dir : data.dir + "/";
                if (!path) {
                    this.rootDir = finalDir;
                }
                this.currentDir = finalDir;
                this.dirs = data.files.filter(file => file.dir);
                this.files = data.files.filter(file => !file.dir);
                this.handleInitClipboard();
            }).catch(() => {
                this.$Message.error("文件列表加载失败");
            })
        },
        handleInitClipboard() {
            if (this.clipboard) {
                this.clipboard.destroy();
            }

            this.clipboard = new Clipboard(
                this.files.map((_, index) => `#clipboard-file-${index}`).join(",")
            );
            this.clipboard.on("success", () => {
                this.$Message.success("复制成功");
            });
        },
        handleClickDir({ name }) {
            this.viewDir(`${this.currentDir}${name}`);
        },
        handleBack() {
            const paths = this.currentDir.split("/");
            const lastFile = paths.slice(0, paths.length - 2).join("/");
            this.viewDir(lastFile.startsWith("/") ? lastFile : "/" + lastFile);
        },
    },
    created() {
        const clipboard = new Clipboard(".clipboard-btn");
        clipboard.on("success", () => {
            this.$Message.success("复制成功");
        });
        this.viewDir();
        this.handleInitClipboard();
    },
}
</script>

<style lang="scss" scoped>
    .root {
        position: fixed;
        padding: 20px;
        width: 500px;
        left: -500px;
        top: 0;
        bottom: 0;
        background-color: #fff;
        border-right: rgba(0, 0, 0, 0.1);
        box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
        transition: left 0.5s ease-in-out;
    }
    .expanded {
        left: 0;
    }
    .trigger {
        position: absolute;
        cursor: pointer;
        right: 0;
        top: 50%;
        margin-top: -50px;
        margin-right: -30px;
        width: 30px;
        height: 100px;
        border-radius: 0 5px 5px 0;
        background-color: #ABABAB;
        box-shadow: 2px 1px 6px rgba(0, 0, 0, 0.1);
        border-left: 1px solid rgba(0, 0, 0, 0.1);
    }
    .currentDir {
        display: flex;

        button {
            margin-left: 5px;
        }
    }
    .fullPath {
        flex: 1;
        height: 32px;
        line-height: 32px;
        padding: 0 10px;
        background-color: #fff;
        border: 1px solid #dcdee2;
        border-radius: 4px;
        user-select: none;
        white-space: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
    }
    .files {
        margin-top: 20px;
    }

    .file {
        cursor: pointer;
        display: flex;
        font-size: 16px;
        align-items: center;
        height: 40px;
        line-height: 40px;
        width:140px;
        margin-bottom:10px;
        &:hover {
            color: #2d8cf0;
        }

        & .fileName {
            margin: 0 18px ;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        & i + .fileName {
            margin-left: 5px;
        }
    }
</style>
